<!DOCTYPE>
<html>
<head>
    <title>首页</title>
    <meta name="referrer" content="never">
    <style>

    /* 设置nav的大小 */
    .nav{

        /* 设置宽度和高度 */
        width: 1210px;
        height: 48px;
        /* 设置背景颜色 */
        background-color: #E8E7E3;

        margin:10px auto;

    }

    /* 设置nav中li */
    .nav li{
        /* 设置li向左浮动，已使菜单横向排列 */
        float: left;
        /* 设置li的高度 */
        /* height: 48px; */
        /* 将文字在父元素中垂直居中 */
        line-height: 48px;

    }

    /* 设置a的样式 */
    .nav a{
        /* 将a转换为块元素 */
        display: block;
        /* 去除下划线 */
        text-decoration: none;
        /* 设置字体颜色 */
        color: #777777;
        /* 修改字体大小 */
        font-size: 18px;

        padding: 0 39px;
    }
    /*修改最后一个快标签大小*/
    .nav li:last-child a{
        padding: 0 42px 0 41px;
    }

    /* 设置鼠标移入的效果 */
    a:hover{
        background-color: #3F3F3F;
        color: #E8E7E3;
    }
    a{text-decoration:none;
        color: #777777;
        /* 修改字体大小 */
        font-size: 18px;
        padding: 0 39px;}
    a.pic {
        padding: 30 40px;
    }
    input.cc{
        width: 400px;
        background-color: #1b111130;
        color: black;
        height: 30px;
    }
    input.c{
        width: 40px;
        background-color: #1b111130;
        color: black;
        height: 30px;
    }
</style>
    <style>
    .list {
        display: flex;
        flex-wrap: wrap;
        padding: 0 10px;
    }
    .list item {
        flex: none;
        width: calc(50% - 20px);
        padding: 20px 20px 20px 10px;
        position: relative;
        font-size: 0;
    }
    .list .item:nth-child(n) {
        margin-right: 20px;
    }
    .item inner {
        display: flex;
    }
    .item a {
        cursor: pointer;
        color: inherit;
        text-decoration: none;
    }
    .list * {
        box-sizing: border-box;
    }
    span{
        color: #777777;
        /* 修改字体大小 */
        font-size: 12px;
        padding: 5 9px;
        display: block;
        margin:5px auto;
    }
</style>
</head>
<body>
<h1>首页</h1>
<!-- 创建导航条的结构 -->
<ul class="nav">
    <li>
        <a href="/login">您好，请先登录</a>
    </li>
    <li>
        <a href="/register">免费注册</a>
    </li>
    <li>
        <a href="/logout">退出登录</a>
    </li>
    <li>
        <a href="/">点我返回首页</a>
    </li>
    <li>
        <a href="/index/recenthot">近期热门</a>
    </li>
    <li>
        <a href="/index/goodbooks">高分图书</a>
    </li>
</ul>
<table>
    <tr>
        <td><form action="/books/searchBook">
            <input class="cc" name="findName" placeholder="搜索书名" style="width:400px" value=""/>
            <input class="c" type="submit" value="搜索"/>
        </form></td>
    </tr>
</table>
<button><a href="/user/recommender">个性化推荐</a></button>
<button><a href="/books/hot">历史热门推荐</a></button>
<#--以上为导航条结构-->
<h3>近期热门推荐</h3>
<ul class="list">
    <#list list as book>
        <li class="item" >
            <div class="inner">
                    <a class="pic"  href="/books/details?bookid=${book.bookId}">
                        <img width="169" height="254" src="${book.imageUrl}">
                    </a>
                <span>
                    ${book.title}
                </span>
            </div>
        </li>
    </#list>
</ul>


</body>
</html>